<template>
    <div class="body">
        <div class="user_info">
            <!-- <img src="" alt=""> -->
            <div class="user_text">
                <p class="name">{{userInfo.username}}</p>
                <p>{{userInfo.phone?userInfo.phone:"暂无手机号码"}}</p>
                <!-- <p><i class="iconfont icon-ziyuan"></i>余额:{{userInfo.integral}}元</p> -->
            </div>
            <div class="img_box">
                <!-- <i class="iconfont icon-biaoqing portrait"></i> -->
                <img :src="userInfo.portrait" alt="" class="user-header">
            </div>
        </div>
        <div class="info_bottom"></div>
        <section class="profile_my_order border-1px">
      <!-- 我的订单 -->
      <div class="my_order">
        <span>
          <i class="iconfont icon-tuiguangjin-"></i>
        </span>
        <div class="my_order_div">
          <span>推广金额奖励</span>
          <span class="my_order_money">
            ￥{{userInfo.integral}}
          </span>
        </div>
      </div>
      <div class="order">
          <p class="order_title">功能服务</p>
          <div class="bottom_line"></div>
      </div>
      <div class="all_fun">
        <router-link class="order_options" to="/delivery"  v-if="userInfo.type == 1">
          <img src="../images/delivery_register.png" alt="">
          <p>配送员注册</p>
        </router-link>
        <router-link to="/addressList" class="order_options">
          <img src="../images/address.png" alt="">
            <p>地址管理</p>
        </router-link>
        <router-link to="/deliverGoods" class="order_options" v-if="userInfo.type !== 1 || userInfo.status !== 1">
          <img src="../images/address.png" alt="">
            <p>开始配送</p>
        </router-link>
        <router-link to="/statistics" class="order_options" v-if="userInfo.type !== 1 || userInfo.status !== 1" >
          <img src="../images/address.png" alt="">
            <p>配送统计</p>
        </router-link>
        <router-link to="/protocol" class="order_options" v-if="userInfo.type !== 1 || userInfo.status !== 1">
          <img src="../images/address.png" alt="">
            <p>配送员协议</p>
        </router-link>
      </div>
      <!-- <router-link to="/delivery" class="my_order" v-if="userInfo.type == 1">
        <span>
          <i class="iconfont icon-waimai"></i>
        </span>
        <div class="my_order_div">
          <span>注册配送员</span>
          <span class="my_order_icon">
            <i class="iconfont icon-you"></i>
          </span>
        </div>
      </router-link> -->
        <!-- <router-link to="/deliverGoods" class="my_order" v-else>
        <span>
          <i class="iconfont icon-waimai"></i>
        </span>
        <div class="my_order_div">
          <span>开始配送</span>
          <span class="my_order_icon">
            <i class="iconfont icon-you"></i>
          </span>
        </div>
      </router-link> -->
        <!-- <router-link to="/addressList" class="my_order">
        <span>
          <i class="iconfont icon-daifahuo"></i>
        </span>
        <div class="my_order_div">
          <span>收货地址管理</span>
          <span class="my_order_icon">
            <i class="iconfont icon-you"></i>
          </span>
        </div>
      </router-link> -->
      <!-- <router-link to="/statistics" class="my_order" v-if="userInfo.type !== 1">
        <span>
          <i class="iconfont icon-pandian"></i>
        </span>
        <div class="my_order_div">
          <span>配送统计</span>
          <span class="my_order_icon">
            <i class="iconfont icon-you"></i>
          </span>
        </div>
      </router-link> -->
      <!-- <router-link to="/protocol" class="my_order" v-if="userInfo.type !== 1">
        <span>
          <i class="iconfont icon-pandian"></i>
        </span>
        <div class="my_order_div">
          <span>配送员协议</span>
          <span class="my_order_icon">
            <i class="iconfont icon-you"></i>
          </span>
        </div>
      </router-link> -->
    </section>
    <section class="login_message login_out">
            <mt-button class="btn" @click="onLoginOut">退出登录</mt-button>
        </section>
    </div>
</template>
<script>
import { loginOut,updateMoney } from '../api'
import { Toast } from 'mint-ui';
export default {
    name:'user',
    data() {
        return {
            userInfo:{}
        }
    },
    created(){
        console.log(this.$store.getters.userInfo)
        this.userInfo = this.$store.getters.userInfo;
        const data={
          token:this.$store.getters.token,
          id:this.$store.getters.userInfo.id
        }
        updateMoney(data).then(res=>{
         this.userInfo.integral = res.data.integral;
         this.$store.commit("UPDATE_MONEY",this.userInfo.integral)
        })
    },
    methods:{
        onLoginOut(){
            loginOut().then(res=>{
                    console.log(res);
                    Toast('退出登录');
                    this.$store.commit("LOGIN_OUT");
                    this.$router.push("/")
                })
        }
    }
}
</script>
<style scoped>
    .body{
      background: #f2f2f2;
      height: Calc(100vh - 8rem);
    }
    .user_info {
        width: 100%;
        height:6rem;
        background: linear-gradient(#EC5D3D,#F1463C);
        display: flex;
        justify-content: space-around;
        position: relative;
        align-items: center;
        z-index: 10;
    }
    .info_bottom{
      height: 4rem;
      width: 100%;
      background: #F1463C;
      border-radius: 0 0 100% 100% / 100%;
      position: absolute;
      top: 7rem;
      z-index: 0;
    }
    .my_order_money{
      font-size: 1rem;
      font-weight: bolder;
    }
    .iconfont.icon-tuiguangjin-{
      font-size: 1.4rem;
      color: #F2461B;
    }
    .order_title{
      font-weight: bolder;
      background: #fff;
      line-height: 3rem;
      width: 90%;
      margin: auto;
    }
    .bottom_line{
      width: 90%;
      height: 0.04rem;
      background: #d8d8d8;
      margin: auto;
    }
    .btn {
        background: #fff;
        width: 80%;
        color: #F2461B;
        height: 3rem;
        font-size: 1rem;
        margin: 1rem auto;
        border-radius: 5px;
        font-weight: bolder;
    }
    .user-header{
      width: 100%;
      height: 100%;
      border-radius: 50%;
      /* line-height: 5rem; */
    }
    .img_box {
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        text-align: center;
        box-shadow:1rem #000;
    }
    .portrait {
        font-size: 4rem;
        color: #fff;
    }
    .user_text {
        width: 50%;
        height: 50%;
        color:#fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .user_text p{
      line-height: 1.5rem;
    }
    .user_text .iconfont {
        font-size: 1rem;
        margin-right: 0.4rem;
    }
    .user_text .name {
        font-weight: bolder;
        font-size: 1.4rem;
    }
    .profile_my_order {
        width: 80%;
        margin: auto;
        border-radius:0.4rem;
        overflow: hidden;
        position: relative;
        z-index: 10;
    }
    .my_order{
      background: #fff;
      /* z-index: 20; */
      height: 3rem;
    }
    .order{
      background: #fff;
    }
    .order_options{
      width: 30%;
      height: 5rem;
      text-align: center;
      display: inline-block;
      font-size: 0.9rem;
      font-weight: bolder;
    }
    .order_options img{
      width: 3.5rem;
      height: 3.5rem;
    }
    .my_order:first-child{
      margin-bottom: 1rem;
      border-radius: 0.4rem;
    }
        .icon-previewright {
            color: #bbb;
            font-size: 10px;
        }
        .my_order_div{
          font-size: 1rem;
          font-weight: bolder;
          margin-left: 1rem;
        }
        .all_fun{
          width: 100%;
          background: #fff;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding: 1rem 0;
        }
</style>